<!--
 * @Description:
 * @Author 卞鹏飞 <228443632@qq.com>
 * @create 28/09/24 PM3:17
 -->
<!--setup-->
<script setup lang="ts">
import { onMounted, getCurrentInstance, type ComponentInternalInstance, ref, onBeforeMount } from 'vue'
import MicroApp from './micro-app/index.vue'
import profile from '@root/profile.ts'
import { useRouterPlus } from '@/router/use-router-plus.ts'
import { shared } from './micro-app/shared.ts'
import type { TRouter } from '@root/types/router.ts'
import { ObserveScopedBody } from './micro-app/utils.ts'

// 状态管理
import useAppSore from '@/store/use-app-store.ts'
import useUserStore from '@/store/use-user-store.ts'
import useLayoutStore from '@/store/use-layout-store.ts'
import useMenusStore from '@/store/use-menu-store.ts'
import routerInstance from '@/router'
import { stringPathJoin } from 'sf-utils2'

const { proxy } = getCurrentInstance() as ComponentInternalInstance

const props = defineProps({})
const emit = defineEmits({})
const { route, router } = useRouterPlus()

const userStore = useUserStore()
const appStore = useAppSore()
const layoutStore = useLayoutStore()
const menusStore = useMenusStore()

// 设置shared 共享
shared.route = route
shared.router = router as unknown as TRouter
shared.store.app = appStore
shared.store.menus = menusStore
shared.store.user = userStore
shared.store.layout = layoutStore

/* 状态 */
const tabActive = layoutStore.tabsActive // 当前tab active
const baseAppPath = stringPathJoin(
  '/',
  layoutStore.tabsActive.split('/').filter(Boolean).at(0).replace(routerInstance._base, '')
) // 基础路径
// const
const currentApp = (profile.apps || []).find((item) => {
  // layoutStore.tabsActive
  // routerInstance
  return item.base == baseAppPath
})
const microAppProps = ref({
  /**
   * 断言 路由是否可以跳转
   */
  assertRouteNextTo(options: { fullPath?: string }) {
    const key = options?.fullPath
    return key === tabActive
  }
})

console.log('profile.apps', profile.apps, baseAppPath, currentApp)

if (currentApp?.base) {
  const { targetTab } = layoutStore.getActiveTabInfo()
  if (!targetTab?.title) {
    router.updateTab({ fullPath: route.fullPath, title: currentApp.title })
  }
}

// 代理body直接子元素
if (!ObserveScopedBody.observeScopedBodyInstance) {
  ObserveScopedBody.observeScopedBodyInstance = new ObserveScopedBody()
  ObserveScopedBody.observeScopedBodyInstance.start()
  ;['hashchange', 'popstate', 'replacestate', 'pushstate'].forEach((eventName) => {
    window.addEventListener(eventName, () => {
      ObserveScopedBody.observeScopedBodyInstance.updateBodyChildren()
    })
  })
}

/* 方法 */

/* 计算 */

/* 监听 */

/* 周期 */

onMounted(() => {})

onBeforeMount(() => {})

/* 暴露 */
defineExpose({
  $: proxy.$
})
</script>

<!--render-->
<template>
  <div class="micro-app-wrap">
    <MicroApp
      :entry="currentApp?.entry"
      :base="currentApp?.base"
      :tab-key="tabActive"
      :micro-app-props="microAppProps"
    />
  </div>
</template>

<!--style-->
<style scoped lang="less">
.micro-app-wrap {
  height: var(--default-layout-page-view-min-height);
}
</style>
